import React, {useImperativeHandle} from "react"
import Taro from "@tarojs/taro";
import {Canvas, Text, View} from "@tarojs/components";
import {useEffect} from "react";
import uCharts from '@qiun/ucharts';
import "./index.scss"
import http from "@/request";
import user from "@/store/user";

interface Data {
    assignmentNum: number
    failNum: number
    pendingNum: number
    rescheduleNum: number
    successNum: number
}

const statusMap = new Map();
statusMap.set('assignmentNum', '派单');
statusMap.set('pendingNum', '待处理');
statusMap.set('rescheduleNum', '改约');
statusMap.set('failNum', '未成功');
statusMap.set('successNum', '成功');

const DataBoard = React.forwardRef((_, ref) => {

    const queryTeamData = () => {
        return http.get('/disp/biz/analysis/teamDashboard')
    }
    const queryPersonalData = () => {
        return http.get('/disp/biz/analysis/personalDashboard')
    }

    const requests = user.info?.teamLeaderFlag === 'T' ? [queryTeamData(), queryPersonalData()] : [queryPersonalData()]

    const init = () => {
        Promise.all(requests).then(res => {
            const resData:Data[] = res.map(item => item.data)
            const vals = resData.map(item => {
                return [...statusMap].reduce((result, cur) => {
                    const key = cur[0]
                    return [...result, item[key]]
                }, [])
            }).map((item, index) => {
                const series = [
                    {
                        name: '个人数据',
                        data: [] as number[],
                        textColor: '#25283b'
                    },
                    {
                        name: '团队数据',
                        data: [] as number[],
                        textColor: '#25283b'
                    }
                ]
                series[index].data = item
                return series[index]
            })
            drawCharts(vals)
        })
    }

    useImperativeHandle(ref, () => ({
        init
    }))

    const drawCharts = (list: any[]) => {
        const sysInfo = Taro.getWindowInfo();
        let cWidth = 600 / 750 * sysInfo.screenWidth;
        let cHeight = 280 / 750 * sysInfo.screenWidth;
        let ctx = Taro.createCanvasContext('column');
        new uCharts({
            color: ["#f635a8", "#3c88ff"],
            padding: [25, 0, 0, 0],
            type: 'column',
            context: ctx,
            width: cWidth,
            height: cHeight,
            pixelRatio: 1,
            categories: [...statusMap.values()],
            series: list,
            animation: true,
            legend: {
                show: true,
            },
            xAxis: {
                disableGrid: true,
                itemCount: 5,
                fontColor: '#25283b'
            },
            yAxis: {
                disabled: true,
                disableGrid: true,
                data: [{min: 0}]
            },
            extra: {
                column: {
                    type: "group",
                    width: 8,
                    seriesGap: 2,
                    activeBgColor: "#000000",
                    activeBgOpacity: 0.08,
                    barBorderCircle: true,
                    categoryGap: 2
                }
            }
        });
    }

    useEffect(() => {
        // init()
    }, [])


    return (<View className="message-bar card-container">
        <View className="message-bar-header">
            <Text className="message-bar-title">今日数据</Text>
        </View>
        <Canvas
            canvas-id="column"
            id="column"
            className="month-chart"/>
    </View>)
})
export default DataBoard;